<template>
    <div class="common-layout">
        <el-container>
            <el-header style="height: 38px">
                <el-menu  router
                    :default-active="this.$router.path"
                    class="el-menu-demo"
                    mode="horizontal"
                    style="height: 38px"
                    @select="handleSelect">
                    <el-menu-item index="/">知识库</el-menu-item>
                    <el-menu-item index="/about">关于</el-menu-item>
                </el-menu>
                <div class="h-6"/>
            </el-header>
            <el-main style="height: 100%">
                <router-view></router-view>
            </el-main>
<!--            <el-footer style="height: 38px">
                <div class="footer">
                    @copy right bole
                </div>
            </el-footer>-->
        </el-container>
    </div>
</template>

<style>
.common-layout{
    width: 100vw;
    height: 100vh;
}
.el-container{
    width: 100vw;
    height: 100vh;
}

.footer{
    align-content: center;
    text-align: center;
}

.el-header{
    --el-header-padding: 0px;
    --el-header-height: 38px;
}

.el-main{
    --el-main-padding: 0px;
}

</style>

<script lang="ts" setup>
import {ref} from 'vue'
import LeftTables from "@/docs/Docs.vue";

const activeIndex = ref('1')

const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>